import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useQuery } from '@tanstack/vue-query'
import type { DescData } from '@arco-design/web-vue'

import { ApiSearchClasses, useSearchClassesQueryKey } from '@/apis/class'

export function useClassDescription() {
  const route = useRoute()

  const { data } = useQuery({
    enabled: !!route.params.classID,
    staleTime: 60_000,
    queryKey: useSearchClassesQueryKey(computed(() => ({ id: +route.params.classID }))),
    queryFn: ({ queryKey: [, , query] }) => ApiSearchClasses(query),
    select({ data }) {
      return data[0]
    }
  })

  const classDescription = computed<DescData[]>(() => {
    const { id, description, teacher, name } = data.value ?? {}
    return [
      {
        label: '班级ID',
        value: id?.toString() ?? ''
      },
      {
        label: '班级名称',
        value: name ?? ''
      },
      {
        label: '教师',
        value: teacher?.name ?? ''
      },
      {
        label: '班级描述',
        value: description ?? ''
      }
    ]
  })

  return {
    classInfo: data,
    classDescription
  }
}
